<template>
  <div class="operation-panel" v-if="openedConnections && openedConnections.length">
    <el-tabs type="border-card" v-model="activeTab" @edit="onTabsEdit" addable>
      <el-tab-pane label="数据库信息" :name="dbTab" :closable="false">
        <database-info></database-info>
      </el-tab-pane>
      <el-tab-pane v-for="tab in tabs" :key="tab.id" :name="tab.id.toString()" :label="tab.label"
        :closable="tab.closable">
        <editor-panel :connection="tab.connection" :database="tab.database" :statement="tab.statement" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import DatabaseInfo from "@/components/DatabaseInfo.vue";
import EditorPanel from "@/components/editor/EditorPanel.vue";
</script>
<script>
import { mapGetters } from "vuex";
import bus from "@/assets/scripts/bus";

export default {
  name: "OperationPanel",
  data() {
    const dbTab = 'db-info'
    return {
      dbTab,
      activeTab: dbTab,
      tabs: [],
      tabIndex: 1
    }
  },
  mounted() {
    bus.on('open-table', this.addTableTab)
    bus.on('database-opened', this.addDatabaseTab)
    bus.on('file-loaded', this.addFileTab)
    bus.on('database-selected', this.activeDatabaseTab)
  },
  beforeUnmount() {
    bus.off('open-table', this.addTableTab)
    bus.off('database-opened', this.addDatabaseTab)
    bus.off('database-selected', this.activeDatabaseTab)
    bus.off('file-loaded', this.addFileTab)
  },
  computed: {
    ...mapGetters({
      openedConnections: 'openedConnections',
      activeInfo: "activeInfo",
    })
  },
  methods: {
    onTabsEdit(tabId) {
      // tabId 为空表示添加，否则为移除
      if (tabId) {
        this.onRemoveTab(tabId)
      } else {
        this.onAddTab()
      }
    },
    onRemoveTab(tabId) {
      const idx = this.tabs.findIndex(tab => tab.id === tabId)
      if (idx === -1) {
        return
      }
      this.tabs.splice(idx, 1)
      const activeTab = this.tabs[idx > 0 ? idx - 1 : 0]
      this.activeTab = activeTab ? activeTab.id : this.dbTab
    },
    onAddTab() {
      const tabId = `tab-temp-${this.tabIndex}`
      this.tabs.push({
        id: tabId,
        label: `查询 ${this.tabIndex}`,
        database: this.activeInfo.database?.name,
        connection: this.activeInfo.connection?.label,
        closable: true
      })
      this.tabIndex++

      this.$nextTick(() => {
        this.activeTab = tabId
      })
    },
    addTableTab({ table, statement, database, connection }) {
      const tabId = `tab-table-${connection}#*#${database}#${table}`
      let tab = this.tabs.filter(tab => tab.id === tabId)[0]
      if (!tab) {
        this.tabs.push({
          id: tabId,
          label: `查询 ${database}`,
          database: database,
          connection: connection,
          statement,
          closable: true
        })
      } else {
        tab.statement = statement
      }
      this.activeTab = tabId
    },
    addFileTab({ statement, database, connection, filename }) {
      const tabId = `tab-file-#${filename}`
      let tab = this.tabs.filter(tab => tab.id === tabId)[0]
      if (!tab) {
        this.tabs.push({
          id: tabId,
          label: `文件 ${filename}`,
          database: database,
          connection: connection,
          statement,
          closable: true
        })
      } else {
        tab.statement = statement
      }
      this.activeTab = tabId
    },
    addDatabaseTab({ connection, database }) {
      const tabId = `tab-database-${connection}#*#${database}`
      let tab = this.tabs.filter(tab => tab.id === tabId)[0]
      if (!tab) {
        this.tabs.push({
          id: tabId,
          label: `查询数据库 ${database}`,
          database,
          connection,
          statement: '',
          closable: true
        })
      }
      this.activeTab = tabId
    },
    activeDatabaseTab() {
      this.activeTab = this.dbTab
    },
    activeTableTab(table) {
      const tabId = `tab-table-${table}`
      let tab = this.tabs.filter(tab => tab.id === tabId)[0]
      if (tab) {
        this.activeTab = tabId
      }
    }
  }
}
</script>

<style lang="less" scoped>
.operation-panel {
  height: 100%;
  width: 100%;
}
</style>
<style lang="less">
.el-table,
.el-table-v2 {
  .auto-ellipsis {
    .cell {
      word-break: keep-all;
      white-space: nowrap;
      word-wrap: normal;
    }
  }

  .el-table-v2__cell-text {
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: keep-all;
    white-space: nowrap;
    word-wrap: normal;
  }
}
</style>
